<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- contents -->
<div class="ddp-type-contents2">

  <div class="ddp-top-flow">
    <!-- navi wrap -->
    <div class="ddp-wrap-navi">
      <a href="javascript:" class="ddp-btn-back" (click)="onClickPrevUserList()"></a>
      <!-- navi -->
      <div class="ddp-ui-naviarea">
        <!-- name -->
        <div class="ddp-box-navi">
          <div class="ddp-wrap-naviname">
            <span class="ddp-data-naviname ddp-readonly">{{userData.fullName}}</span>
          </div>

        </div>
        <!-- //name -->
      </div>
      <!-- //navi -->

    </div>
    <!-- //navi wrap -->


  </div>

  <!-- 상세 -->
  <div class="ddp-wrap-datadetail">
    <div class="ddp-ui-option ddp-clear">
      <!-- edit -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">{{'msg.mem.ui.detail.join.on' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <div class="ddp-data-txt">
            {{ userData.createdTime | mdate:'YYYY-MM-DD HH:mm' }}
          </div>
        </div>
        <!-- //edit option -->
      </div>
      <!-- //edit -->
      <!-- edit -->
      <div class="ddp-wrap-edit" *ngIf="userData.lastAccessTime">
        <label class="ddp-label-type">{{'msg.mem.ui.detail.last.access' | translate}}</label>
        <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <div class="ddp-data-txt">
            {{ userData.lastAccessTime | mdate:'YYYY-MM-DD HH:mm'}}
            </div>
          </div>
      <!-- //edit option -->
      </div>
      <!-- //edit -->

      <!-- right -->
      <div class="ddp-ui-rightoption">
        <!-- edit -->
        <div class="ddp-wrap-edit">
          <label class="ddp-label-type">{{'msg.mem.th.status' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <!-- selectbox -->
            <!-- 선택시 : ddp-selected 추가 -->
            <div class="ddp-type-selectbox"
                 [class.ddp-selected]="statusShowFl"
                 (click)="statusShowFl = !statusShowFl" (clickOutside)="statusShowFl = false">
              <span class="ddp-txt-selectbox">{{getUserStatus()}}</span>
              <ul class="ddp-list-selectbox ddp-selectdown ddp-list-popup">
                <li *ngFor="let status of userStatusList"
                    [class.ddp-selected]="status.value === userData.status?.toString()">
                  <a href="javascript:" (click)="onChangeStatus(status.value)">
                    {{status.label}} <em class="ddp-icon-check"></em>
                  </a>
                </li>
              </ul>
            </div>
            <!-- //selectbox -->
          </div>
          <!-- //edit option -->
        </div>
        <!-- //edit -->
        <a href="javascript:" class="ddp-btn-selection ddp-line" (click)="onClickOpenPopupChangePw()" style="padding: 6px
        10px 6px 10px;">
          <em class="ddp-icon-key"></em>{{'msg.mem.btn.change.pw' | translate}}
        </a>
        <a href="javascript:" class="ddp-btn-selection ddp-line" (click)="onClickResetPassword()" style="padding: 6px 10px 6px 10px;">
          <em class="ddp-icon-key"></em>{{'msg.mem.btn.reset.pw' | translate}}
        </a>
        <!--<a href="javascript:" class="ddp-btn-selection ddp-line" (click)="onClickLoginUser()"><em class="ddp-icon-view"></em>{{'msg.mem.btn.login.usr' | translate}}</a>-->
        <a href="javascript:" class="ddp-btn-selection ddp-reject" (click)="onClickDeleteUser()" *ngIf="userData.status?.toString() === 'LOCKED'"><em
          class="ddp-icon-delete"></em>{{'msg.mem.btn.delete.usr' | translate}}</a>

      </div>
      <!-- //right -->
    </div>
    <div class="ddp-ui-datadetail">
      <label class="ddp-label-detail">{{'msg.mem.ui.detail.info' | translate}}</label>
      <div class="ddp-ui-userdetail">
        <!-- 사진 -->
        <div class="ddp-data-photo">
          <img src="{{getUserImage()}}" class="ddp">
        </div>

        <!-- //사진 -->

        <table class="ddp-table-detail">
          <colgroup>
            <col width="160px">
            <col width="*">
          </colgroup>
          <tbody>
          <tr>
            <th>
              {{'msg.mem.ui.detail.info.fullname' | translate}}
            </th>
            <td>
              {{userData.fullName}}
            </td>
          </tr>
          <tr>
            <th>
              {{'msg.mem.ui.detail.info.name' | translate}}
            </th>
            <td>
              {{userData.id}}
            </td>
          </tr>
          <tr>
            <th>
              {{'msg.mem.ui.detail.info.email' | translate}}
            </th>
            <td>
              <a href="mailto:{{userData.email}}" class="ddp-link-window">{{userData.email}}</a>
            </td>
          </tr>
          <tr>
            <th>
              {{'msg.mem.ui.detail.info.permission' | translate}}
            </th>
            <td>
              {{getRoleNames(userData.roleNames)}}
            </td>
          </tr>
          <tr>
            <th>
              {{'msg.mem.ui.detail.info.phone' | translate}}
            </th>
            <td>
              <span class="ddp-data-none">{{userData.tel ? userData.tel : ('msg.groups.ui.none' | translate)}}</span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!-- table detail -->
      <div class="ddp-wrap-table-detail">
        <div class="ddp-type-plan">
          <label class="ddp-label-detail">{{'msg.mem.ui.detail.groups' | translate}} ({{getGroupLength()}})
            <a href="javascript:" class="ddp-btn-option2" (click)="onClickEditGroups()"></a></label>
          <!--<a href="#" class="ddp-btn-pop "><em class="ddp-icon-email"></em>email to all users</a>-->
        </div>
        <table class="ddp-list-form2" *ngIf="getGroupList().length > 0">
          <colgroup>
            <col width="25%">
            <col width="*">
          </colgroup>
          <tbody>
          <tr *ngFor="let group of getGroupList()">
            <td>
              <a href="javascript:" class="ddp-link-info ddp-group" (click)="onClickLinkGroup(group.id)">{{group.name}}
                <em class="ddp-icon-window"></em>
              </a>
            </td>
            <td>{{getRoleNames(group.roleNames)}}</td>
          </tr>
          </tbody>
        </table>

      </div>
      <!-- //table detail -->

    </div>
  </div>
  <!-- //상세 -->


</div>
<!-- //contents -->

<!-- confirm modal -->
<app-confirm-modal (confirm)="confirmHandler($event)"></app-confirm-modal>
<!-- //confirm modal -->

<!-- group component -->
<app-update-user-management-members (groupComplete)="getUserDetail()"></app-update-user-management-members>
<!-- //group component -->

<!-- change-workspace-owner modal -->
<change-workspace-owner-modal (onComplete)="showDeleteUserConfirm($event);"></change-workspace-owner-modal>
<!-- //change-workspace-owner modal -->



<div class="ddp-wrap-layout-popup" *ngIf="isShowPopupChangePw">

  <div class="ddp-box-popup">
    <a href="javascript:" class="ddp-btn-close" (click)="isShowPopupChangePw = false"></a>
    <!-- title -->
    <div class="ddp-pop-title">{{ 'msg.mem.ui.detail.password.title'| translate}}</div>
    <!-- //title -->

    <div class="ddp-wrap-editbox">
      <!-- edit -->
      <div class="ddp-wrap-edit2" [class.ddp-error]="isInvalidPw">
        <label class="ddp-label-type">{{'msg.mem.ui.detail.password' | translate}}</label>
        <input type="password" class="ddp-input-type"
               placeholder="{{'msg.mem.ui.detail.password.ph' | translate}}"
               [(ngModel)]="inputPw"
               (keydown)="changePwHideError('password')" (blur)="changePwValidation('password')"/>
        <!-- error -->
        <span class="ddp-ui-error">{{invalidPwMsg}}</span>
        <!-- error -->
      </div>
      <!-- //edit -->

      <!-- edit -->
      <div class="ddp-wrap-edit2" [class.ddp-error]="isInvalidConfirmPw">
        <label class="ddp-label-type">{{'msg.mem.ui.detail.password.confirm' | translate}}</label>
        <input type="password" class="ddp-input-type"
               placeholder="{{'msg.mem.ui.detail.password.confirm.ph' | translate}}"
               [(ngModel)]="inputConfirmPw"
               (keydown)="changePwHideError('confirmPassword')" (blur)="changePwValidation('confirmPassword')"/>
        <!-- error -->
        <span class="ddp-ui-error">{{invalidConfirmPwMsg}}</span>
        <!-- error -->
      </div>
      <!-- //edit -->
      <div class="ddp-txt-alert">
      </div>
    </div>
    <!-- button -->
    <div class="ddp-ui-buttons">
      <a href="javascript:" class="ddp-btn-type-popup" (click)="isShowPopupChangePw = false">
        {{'msg.comm.btn.cancl' | translate}}
      </a>
      <!-- disabled 시 ddp-disabled 추가 -->
      <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black"
         [class.ddp-disabled]="isInvalidPw || isInvalidConfirmPw || '' === inputPw || '' === inputConfirmPw"
         (click)="onClickChangePassword()">{{'msg.comm.btn.done' | translate}}</a>
    </div>
    <!-- //button -->
  </div>

</div>
